<template>
	<view style="position: fixed;left: 0;right: 0;top:0;bottom: 0; z-index: 10000;"
		:style="{paddingTop:top+'px',paddingBottom:bottom + 'px'}" v-show="show"
		class="gui-flex gui-column gui-bg-gray">

		<view class="gui-padding gui-text-center">
			<!-- <view style="width: 100rpx;" @tap="show=false" class="gui-primary-color">关闭</view> -->
			<text class="gui-bold gui-text">请签字</text>
			<!-- <view style="width: 100rpx;"></view> -->
		</view>
		<view class="gui-flex1 gui-bg-white">
			<l-signature v-if="showSign" disableScroll ref="sign" :penColor="color" :penSize="fontSize"
				:openSmooth="openSmooth"></l-signature>
		</view>
		<view class="gui-flex gui-flex-shrink0 gui-padding">

			<view class="gui-color-red gui-flex1 gui-text-center">
				<text @tap="onClick('清空')">
					<text class="gui-icons">&#xe610;</text>
					清空
				</text>
			</view>

			<view class="gui-primary-color  gui-flex1 gui-text-center">
				<text class="gui-icons">&#xe616;</text>
				<text @tap="onClick('撤消')">
					撤消
				</text>
			</view>

			<view class="gui-primary-color gui-flex1 gui-text-center">
				<text class="gui-icons">&#xe60f;</text>
				<text @tap="onClick('完成')">
					确认
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hyb-sign",
		props: {
			color: {
				type: String,
				default: '#000000'
			},
			fontSize: {
				type: Number,
				default: 5
			},
		},

		data() {
			return {
				top: 0,
				bottom: 0,
				openSmooth: true,
				show: false,
				showSign: false
			};
		},

		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					// 对安全区域边界进行判断并赋值
					if (res.safeArea) {
						const safeAreaInsets = res.safeAreaInsets;
						this.top = safeAreaInsets.top
						this.bottom = safeAreaInsets.bottom
					}
				}
			});
		},
		methods: {
			popup() {
				this.show = true
				this.$nextTick(() => {
					this.showSign = true
				})
			},

			onClick(type) {
				if (type == '清空') {
					this.$refs.sign.clear()
				} else if (type == '完成') {
					this.$refs.sign.canvasToTempFilePath({
						success: (res) => {
							let url = ""
							if (!res.isEmpty) {
								url = res.tempFilePath
							}
							setTimeout(() => {
								this.$emit("change", url)
								this.show = false
							})

						}
					})
				} else if (type == '撤消') {
					if (this.modelValue) {
						return
					}
					this.$refs.sign.undo()
				}
			}
		}
	}
</script>

<style>

</style>